<template>
  <div class="sidebar">
    <!-- Logo -->
    <div class="logo">
      <span>Python私教</span>
    </div>

    <!-- 新对话按钮 -->
    <button class="new-chat-button" @click="startNewChat">
      <span>+ 新对话</span>
    </button>

    <!-- 历史对话记录 -->
    <div class="history">
      <div
          v-for="(chat, index) in chatHistory"
          :key="index"
          class="history-item"
          @click="selectChat(index)"
      >
        <span>{{ chat.title }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 历史对话记录
const chatHistory = ref([
  { title: '对话 1' },
  { title: '对话 2' },
  { title: '对话 3' },
]);

// 开始新对话
const emit = defineEmits(['new-chat', 'select-chat']);

const startNewChat = () => {
  emit('new-chat');
};

// 选择历史对话
const selectChat = (index) => {
  emit('select-chat', index);
};
</script>

<style scoped>
/* 左侧菜单栏样式 */
.sidebar {
  width: 250px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

/* Logo 样式 */
.logo {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
}

/* 新对话按钮样式 */
.new-chat-button {
  padding: 10px;
  background: linear-gradient(135deg, #00ccff, #007bff);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 20px;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.new-chat-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 历史对话记录样式 */
.history {
  flex: 1;
  overflow-y: auto;
}

.history-item {
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s ease;
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.2);
}
</style>